<template>
  <view class="favorites-container">
    <!-- 顶部标题 -->
    <view class="favorites-header">
      <text class="header-title">我的收藏</text>
    </view>
    
    <!-- 收藏作品列表 -->
    <view class="favorites-list" v-if="favoritesList.length > 0">
      <view 
        class="favorite-item" 
        v-for="(item, index) in favoritesList" 
        :key="index"
        @click="goToDetail(item.id)"
      >
        <!-- 作品卡片 -->
        <view class="artwork-card">
          <!-- 图片对比区域 -->
          <view class="image-compare">
            <view class="original-image">
              <image :src="item.originalUrl" mode="aspectFill"></image>
              <text class="image-label">原图</text>
            </view>
            <view class="result-image">
              <image :src="item.resultUrl" mode="aspectFill"></image>
              <text class="image-label">AI风格</text>
            </view>
          </view>
          
          <!-- 作品信息 -->
          <view class="artwork-info">
            <!-- 风格标签 -->
            <view class="style-tags">
              <view class="tag-item" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
                {{ tag }}
              </view>
            </view>
            
            <!-- AI描述 -->
            <view class="ai-description">
              <text class="description-title">AI描述：</text>
              <text class="description-content">{{ item.description }}</text>
            </view>
            
            <!-- 创建时间 -->
            <view class="create-time">
              {{ formatTime(item.createTime) }}
            </view>
            
            <!-- 互动区域 -->
            <view class="interaction-area">
              <!-- 点赞 -->
              <view class="interaction-item" @click.stop="likeArtwork(item.id)">
                <text class="interaction-icon" :class="{ 'active': item.isLiked }">❤️</text>
                <text class="interaction-count">{{ item.likeCount }}</text>
              </view>
              
              <!-- 评论 -->
              <view class="interaction-item" @click.stop="showComments(item.id)">
                <text class="interaction-icon">💬</text>
                <text class="interaction-count">{{ item.commentCount }}</text>
              </view>
              
              <!-- 分享 -->
              <view class="interaction-item" @click.stop="shareArtwork(item.id)">
                <text class="interaction-icon">🔄</text>
                <text class="interaction-count">{{ item.shareCount }}</text>
              </view>
              
              <!-- 取消收藏 -->
              <view class="interaction-item" @click.stop="removeFavorite(item.id)">
                <text class="interaction-icon remove-favorite">⭐</text>
                <text class="interaction-text">取消收藏</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-image" src="/static/images/empty-favorites.png" mode="aspectFit"></image>
      <text class="empty-text">暂无收藏作品</text>
      <button class="explore-button" @click="goToFeed">去发现页面探索</button>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="favoritesList.length > 0 && hasMore">
      <text class="load-more-text" @click="loadMore">加载更多</text>
    </view>
    
    <!-- 到底提示 -->
    <view class="bottom-tip" v-if="favoritesList.length > 0 && !hasMore">
      <text class="bottom-tip-text">— 已经到底啦 —</text>
    </view>
  </view>
</template>

<script>
import * as commonUtils from '@/utils/common.js';

export default {
  data() {
    return {
      // 收藏作品列表
      favoritesList: [],
      // 页码
      page: 1,
      // 每页数量
      pageSize: 10,
      // 是否有更多
      hasMore: true,
      // 是否正在加载
      isLoading: false
    };
  },
  
  onLoad() {
    this.loadFavoritesList();
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.hasMore = true;
    this.loadFavoritesList(() => {
      uni.stopPullDownRefresh();
    });
  },
  
  // 触底加载更多
  onReachBottom() {
    if (this.hasMore) {
      this.loadMore();
    }
  },
  
  methods: {
    // 加载收藏列表
    loadFavoritesList(callback) {
      if (this.isLoading) return;
      
      this.isLoading = true;
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        const mockData = [];
        
        // 第一页才清空列表
        if (this.page === 1) {
          this.favoritesList = [];
        }
        
        // 模拟生成10条数据
        for (let i = 0; i < 10; i++) {
          // 如果是第二页以后且已经有5条数据，则不再添加，模拟没有更多数据的情况
          if (this.page > 1 && i >= 5) {
            break;
          }
          
          mockData.push({
            id: `favorite-${this.page}-${i}`,
            originalUrl: 'https://picsum.photos/300/300?random=' + Math.random(),
            resultUrl: 'https://picsum.photos/300/300?random=' + Math.random(),
            tags: ['写实风格', '油画', '风景'],
            description: '这是一幅美丽的风景画，展现了大自然的壮丽景色。',
            createTime: new Date().getTime() - i * 86400000, // 每条数据间隔一天
            isLiked: Math.random() > 0.5,
            likeCount: Math.floor(Math.random() * 100),
            commentCount: Math.floor(Math.random() * 50),
            shareCount: Math.floor(Math.random() * 30)
          });
        }
        
        // 添加到列表
        this.favoritesList = [...this.favoritesList, ...mockData];
        
        // 判断是否还有更多
        this.hasMore = mockData.length === this.pageSize;
        
        this.isLoading = false;
        
        // 执行回调
        if (typeof callback === 'function') {
          callback();
        }
      }, 1000);
    },
    
    // 加载更多
    loadMore() {
      if (this.isLoading) return;
      this.page++;
      this.loadFavoritesList();
    },
    
    // 格式化时间
    formatTime(time) {
      return commonUtils.formatDateTime(time);
    },
    
    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      });
    },
    
    // 点赞作品
    likeArtwork(id) {
      // 查找作品
      const index = this.favoritesList.findIndex(item => item.id === id);
      if (index === -1) return;
      
      const artwork = this.favoritesList[index];
      
      // 切换点赞状态
      artwork.isLiked = !artwork.isLiked;
      
      // 更新点赞数
      if (artwork.isLiked) {
        artwork.likeCount++;
      } else {
        artwork.likeCount--;
      }
      
      // 更新列表
      this.$set(this.favoritesList, index, artwork);
      
      // 提示
      uni.showToast({
        title: artwork.isLiked ? '点赞成功' : '取消点赞',
        icon: 'none'
      });
    },
    
    // 取消收藏
    removeFavorite(id) {
      uni.showModal({
        title: '提示',
        content: '确定要取消收藏该作品吗？',
        success: res => {
          if (res.confirm) {
            // 查找作品
            const index = this.favoritesList.findIndex(item => item.id === id);
            if (index === -1) return;
            
            // 从列表中移除
            this.favoritesList.splice(index, 1);
            
            // 提示
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 显示评论
    showComments(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}&showComments=true`
      });
    },
    
    // 分享作品
    shareArtwork(id) {
      // 查找作品
      const index = this.favoritesList.findIndex(item => item.id === id);
      if (index === -1) return;
      
      const artwork = this.favoritesList[index];
      
      // 更新分享数
      artwork.shareCount++;
      
      // 更新列表
      this.$set(this.favoritesList, index, artwork);
      
      // 显示分享菜单
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '分享到QQ', '复制链接'],
        success: res => {
          // 提示
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 跳转到发现页面
    goToFeed() {
      uni.switchTab({
        url: '/pages/feed/feed'
      });
    }
  }
};
</script>

<style>
.favorites-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.favorites-header {
  padding: 20rpx 0;
  text-align: center;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.favorite-item {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.artwork-card {
  width: 100%;
}

.image-compare {
  display: flex;
  width: 100%;
  height: 400rpx;
}

.original-image,
.result-image {
  position: relative;
  width: 50%;
  height: 100%;
}

.original-image image,
.result-image image {
  width: 100%;
  height: 100%;
}

.image-label {
  position: absolute;
  bottom: 10rpx;
  left: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

.artwork-info {
  padding: 20rpx;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 15rpx;
}

.tag-item {
  background-color: #f0f0f0;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
}

.ai-description {
  margin-bottom: 15rpx;
}

.description-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.description-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.create-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.interaction-area {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 15rpx;
}

.interaction-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.interaction-icon {
  font-size: 32rpx;
}

.interaction-icon.active {
  color: #ff4d4f;
}

.remove-favorite {
  color: #ffcc00;
}

.interaction-count,
.interaction-text {
  font-size: 24rpx;
  color: #666;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.explore-button {
  background-color: #FF69B4;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
}

.load-more-text {
  font-size: 28rpx;
  color: #666;
}

.bottom-tip {
  text-align: center;
  padding: 30rpx 0;
}

.bottom-tip-text {
  font-size: 24rpx;
  color: #999;
}
</style>
